import useMessage from "@/hooks/useMessage";
import { Form, Button, Input, FormInstance } from "antd";
import React, { useEffect, useRef } from "react";
import { User } from "@/api/interface";
import { registerUserApi } from "@/api/modules/user";

interface PropsType {
	onComfirm?: () => void;
}

const TagAdd: React.FC<PropsType> = props => {
	const { onComfirm } = props;
	const { contextHolder, success } = useMessage();

	const formRef = useRef<FormInstance | null>(null);

	const onFinish = async (register: User.Register) => {
		registerUserApi(register);
		onComfirm && onComfirm();
		success("发布成功");
	};

	useEffect(() => {
		return () => {
			formRef.current?.setFieldsValue({
				user_name: "",
				password: ""
			});
		};
	});

	return (
		<div>
			{contextHolder}
			<Form ref={formRef} labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} layout="horizontal" onFinish={onFinish}>
				<Form.Item label="账号" rules={[{ required: true }]} name="user_name">
					<Input />
				</Form.Item>
				<Form.Item label="密码" rules={[{ required: true }]} name="password">
					<Input.Password />
				</Form.Item>
				<Form.Item wrapperCol={{ offset: 4 }}>
					<Button htmlType="submit" type="primary">
						提交
					</Button>
				</Form.Item>
			</Form>
		</div>
	);
};

export default TagAdd;
